<template>
  <div class="background-image">
    <v-card elevation="4" class="formTemplate">
      <v-text-field v-model="user_phonenum" class="user_phonenum" type="text" name="user_phonenum" label="用户名" placeholder="请输入电话号码" style="width: 70%;
    margin-left: 80px;">
      </v-text-field>
      <v-text-field v-model="password" :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'" :rules="[rules.required, rules.min]" :type="show1 ? 'text' : 'password'" name="password" label="密码" hint="至少输入六位" counter @click:append="show1 = !show1" class="password" placeholder="请输入密码" style="width: 70%;
    margin-left: 80px;">
      </v-text-field>
      <div class="text-center">
        <v-btn depressed color="primary" dark class="submit" @click="loginit()">
          登录
        </v-btn>
      </div>
      <div class="text-center">
        <v-dialog v-model="dialog" width="500">
          <template v-slot:activator="{ on, attrs }">
            <v-btn depressed color="primary" dark class="registe" v-bind="attrs" v-on="on" @click="created()">
              注册
            </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="text-h5">注册信息</span>
            </v-card-title>
            <v-card-text>
              <v-container>
                <v-row>
                  <el-select v-model="value" placeholder="请选择" size="medium">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <v-col cols="12">
                    <v-text-field v-model="register_username" :rules="[rules.required]" label="用户名" type="text" name="register_username" required></v-text-field>
                  </v-col>
                  <v-col cols="12">
                    <v-text-field v-model="register_phonenum" :rules="[rules.required]" label="电话号码" type="text" name="register_phonenum" required></v-text-field>
                  </v-col>
                  <v-col cols="12">
                    <v-text-field v-model="register_password" :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'" :rules="[rules.required, rules.min]" :type="show1 ? 'text' : 'password'" name="register_password" label="密码" hint="至少输入六位" counter @click:append="show2 = !show2" required></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
              <v-spacer></v-spacer>

              <small>请认真填写</small>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="primary" dark @click="register()">
                提交
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </div>
    </v-card>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  data: () => ({
    show1: false,
    show2: true,
    user_phonenum: "",
    password: "",
    register_username: "",
    register_password: "",
    register_phonenum: "",
    items: ["odinary", "admin"],
    rules: {
      required: (value) => !!value || "Required.",
      min: (v) => v.length >= 6 || "Min 6 characters",
      emailMatch: () => `The password you entered don't match`,
    },

    options: [
      {
        value: "ordinary",
        label: "学生",
      },
      {
        value: "admin",
        label: "管理员",
      },
    ],
    value: "",
    dialog: false,
  }),
  methods: {
    loginit(args) {
      if (args == null) {
        args = {
          url: this.$root.businessServer + "passport/login",
          data: {
            user_phonenum: this.user_phonenum,
            password: this.password,
          },
        };
      }
      axios({
        method: "post",
        url: args.url,
        data: qs.stringify(args.data),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((response) => {
          if (response.data.code == "200") {
            if (response.data.message == "success") {
              localStorage.setItem("token", response.data.data.token);
              if (response.data.data.user_role == "ordinary")
                this.$router.push("/main");
              else if (response.data.data.user_role == "admin")
                this.$router.push("/index");
            }
          }
        })
        .catch((error) => {});
    },
    created() {
      this.value = this.options[0].value;
    },
    register(args) {
      if (args == null) {
        args = {
          url: this.$root.businessServer + "passport/register",
          data: {
            register_username: this.register_username,
            register_phonenum: this.register_phonenum,
            register_password: this.register_password,
            user_role: this.value,
          },
        };
      }
      axios({
        method: "post",
        url: args.url,
        data: qs.stringify(args.data),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then(async (response) => {
          if (response.data.code == "200") {
            if (response.data.message == "success") {
              await localStorage.setItem("token", response.data.data.token);
              this.dialog = await false;
            } else this.dialog = await true;
          }
        })
        .catch((error) => {});
    },
  },
};
</script>

<style scoped>
.formTemplate {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 500px;
  height: 400px;
}
.user_phonenum {
  margin-top: 60px;
}
.password {
  margin-top: 40px;
}
.submit {
  margin-top: 30px;
  width: 300px;
}
.registe {
  margin-top: 15px;
  width: 300px;
}
.background-image {
  background-image: url("@/assets/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

</style>